<style lang="less" scoped>
    @import './page.less';
</style>

<template>
    <div class="order-list">
        <Form :model="searchForm" inline :label-width="60">
            <FormItem label="订单号">
                <Input class="w200" placeholder="请输入订单编号" v-model="searchForm.order_number"></Input>
            </FormItem>
            <FormItem label="门店名称">
                <i-select class="w200" filterable clearable v-model="searchForm.store_id" placeholder="全部选择">
                    <i-option v-for="item in dname" :value="item.id" :key="item.id">{{item.store_name}}</i-option>
                </i-select>
            </FormItem>
            <FormItem label="支付方式">
                <i-select class="w200" v-model="searchForm.pay_software" placeholder="全部选择" clearable>
                    <i-option v-for="(item,index) in pay_softwares" :value="item.flag" :key="index">{{ item.name }}</i-option>
                </i-select>
            </FormItem>
            <FormItem label="支付状态">
                <i-select class="w200" v-model="searchForm.pay_status" placeholder="全部选择" clearable>
                    <i-option v-for="(item,index) in status" :value="item.flag" :key="index">{{ item.name }}</i-option>
                </i-select>
            </FormItem>
            <FormItem label="支付时间">
                <DatePicker class="w200" type="datetime" v-model="startTime" placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss" @on-change="startFormat"></DatePicker>
                <span>-</span>
                <DatePicker class="w200" type="datetime" v-model="endTime" placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss" @on-change="endFormat"></DatePicker>
            </FormItem>
            <FormItem label="金额范围">
                <Input class="w200" placeholder="最小金额" v-model="searchForm.min"></Input>
                <span>-</span>
                <Input class="w200" placeholder="最大金额" v-model="searchForm.max"></Input>
            </FormItem>
            <i-button icon="ios-search" type="success" @click="hendleSearch">查询</i-button>
            <div>
                <i-button type="primary" @click="nowDay">当日订单</i-button>
                <i-button type="primary" @click="toDay">昨日订单</i-button>
                <i-button type="primary" @click="nowMonth">当月订单</i-button>
                <i-button type="primary" @click="hendleSearch">批量更新状态</i-button>
                <i-button type="primary" @click="download">导出明细</i-button>
            </div>
        </Form>
        <Row class="total margin-top-10">
            <!-- <Button>有效统计</Button> -->
            <p>有效交易总金额：<span class="succ">{{ valid_amount + '元'}}</span>，有效交易总笔数：<span class="tip">{{ valid_count + '笔'}}</span></p>
        </Row>
        <Row class="table">
            <a id="hrefToExportTable" style="postion: absolute;left: -10px;top: -10px;width: 0px;height: 0px;"></a>
            <Table border :columns="title" :data="data" ref="tableExcel"></Table>
            <Page :total="page.total" :current.sync="page.current" :page-size="page.pageSize" @on-change="handlePage" show-total show-elevator  class="fr margin-top-20"></Page>
        </Row>

        <Modal :title="next ? '申请退款' : '订单详情'" v-model="Modal" :width="next ? 455 : 520" @on-cancel="handleClose">
            <div v-if="!next">
                <p>订单号：{{ deta.order_number }}</p>
                <p>交易时间：{{ deta.pay_at }}</p>
                <p>门店名称：{{ deta.store_name }}</p>
                <p>门店打印名称：{{ deta.print_name }}</p>
                <p>交易金额：{{ deta.amount }}</p>
                <p>支付方式：{{ deta.pay_software }}</p>
                <p>备注：{{ deta.remark }}</p>
            </div>
            <Form v-else :label-width="80" ref="refund">
                <FormItem label="退款金额"><Input :placeholder="refund" style="width:200px;margin:0 10px;" v-model="refundMoney"/><Button type="ghost" @click="refundMoney = refund">全部退款</Button></FormItem>
                <FormItem label="备注"><Input type="textarea" style="width:290px;margin-left:10px;" v-model="remark"/></FormItem>
            </Form>
            <div slot="footer">
                <Button v-if="succ" type="primary" @click="next = true;succ = false;">申请退款</Button>
                <Button v-if="next" type="primary" @click="sub">确认退款</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { orderListRefund, orderListInit, storesInit, orderListSearch, orderListDown, orderListPage, orderList, orderListUpdate } from '@/api/order'
    export default {
        data(){
            return{
                Modal: false, //模态框显示隐藏
                succ: false, //付款状态
                next: false, //下一步申请退款
                pay_softwares: [],
                refund: '',
                startTime: '',
                endTime: '',
                remark: '',
                refundMoney: '',
                searchForm: {
                    order_number: '',
                    store_id: '',
                    staff_id: '',
                    pay_software: '',
                    pay_channel: '',
                    pay_status: '',
                    start: '',
                    end: '',
                    min: '',
                    max: '',
                    qrcode: ''
                },
                page: {
                    total: 0,
                    pageSize: 1,
                    current: 1
                },
                valid_count: 0,
                valid_amount: 0.00,
                dname:[],
                // storeUser:[],
                title:[        //表格表头
                    {
                        title: '订单号',
                        align: 'center',
                        key: 'order_number'
                    },
                    {
                        title: '门店名称',
                        align: 'center',
                        key: 'store_name'
                    },
                    {
                        title: '交易金额',
                        align: 'center',
                        key: 'amount'
                    },
                    {
                        title: '付款状态',
                        align: 'center',
                        key: 'pay_status'
                    },
                    {
                        title: '支付方式',
                        align: 'center',
                        key: 'pay_software',
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.pay_software === 1 ? process.api.MAT_HOST + '/bfd34e8c-b709-11e8-9acd-10bf48e1a920.jpg' : params.row.pay_software === 2 ? process.api.MAT_HOST + '/a6976f20-b709-11e8-93dd-10bf48e1a920.jpg' : params.row.pay_software === 3 ? process.api.MAT_HOST + '/ad7d87c6-9fb1-11e8-a2a7-10bf48e1a920.jpg' : params.row.pay_software === 4 ? process.api.MAT_HOST + '/be7bc132-9fb1-11e8-9c17-10bf48e1a920.jpg' : params.row.pay_software === 0 ? process.api.MAT_HOST + '/d28e9938-9fb1-11e8-8a1d-10bf48e1a920.jpg' : params.row.pay_software === 5 ? process.api.MAT_HOST + '/52580bd8-b71b-11e8-b274-10bf48e1a920.jpg' : params.row.pay_software === 6 ? process.api.MAT_HOST + '/728201de-b71b-11e8-87b0-10bf48e1a920.jpg' : ''
                                },
                                style: {
                                    width: 'auto',
                                    height: '30px'
                                }
                            })
                        }
                    },
                    {
                        title: '支付时间',
                        align: 'center',
                        key: 'pay_at'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'action',
                        render:(h,params)=>{
                            return h('a',{
                                style:{
                                    color:'#0078ff',
                                    fontSize: '12px'
                                },
                                on:{
                                    click:()=>{
                                        this.show(params.row.id);
                                    }
                                }
                            },'查看')
                        }
                    }
                ],
                data:[],
                deta:{
                    amount: '',
                    pay_at: '',
                    remark: '',
                    pay_software: '',
                    order_number: '',
                    amount: '',
                    arrive_mount: '',
                    store_name: '',
                    trade_no: '',
                    account: '',
                    print_name: ''
                },  //详情数据
                status: [],
                channel: [],
                id: ''
            }
        },
        methods:{
            init() {
                orderListInit().then(Response => {
                    this.page.total = Response.data.data.total
                    this.page.pageSize = Response.data.data.size
                    this.data = Response.data.data.orders
                    this.status = Response.data.data.pay_status
                    this.channel = Response.data.data.pay_channels
                    this.valid_count = Response.data.data.valid_count
                    this.valid_amount = Response.data.data.valid_amount
                    this.page.current = Response.data.data.page
                    this.pay_softwares = Response.data.data.pay_software
                })
                storesInit().then(Response => {
                    this.dname = Response.data.data.stores
                })
            },
            show(id) {
                this.Modal = true;
                if(this.next){
                    this.next = false;
                    this.succ = true;
                }
                orderList(id).then(response => {
                    this.id = id
                    this.succ = true
                    this.deta.pay_at = response.data.data.pay_at
                    this.deta.pay_software = response.data.data.pay_software
                    this.deta.order_number = response.data.data.order_number
                    this.deta.amount = response.data.data.amount
                    this.deta.arrive_mount = response.data.data.arrive_mount
                    this.deta.store_name = response.data.data.store_name
                    this.deta.print_name = response.data.data.print_name
                    this.deta.remark = response.data.data.remarks
                    this.refund = String(response.data.data.amount)
                })
            },
            update() {
                orderListUpdate(this.id).then(response => {
                    response.data.data.pay_status === 1 || response.data.data.pay_status === 6 ? this.succ = true : this.succ = false;
                    this.deta.pay_at = response.data.data.pay_at
                    this.deta.pay_software = response.data.data.pay_software
                    this.deta.order_number = response.data.data.order_number
                    this.deta.amount = response.data.data.amount
                    this.deta.arrive_mount = response.data.data.arrive_mount
                    this.deta.store_name = response.data.data.store_name
                    this.deta.print_name = response.data.data.print_name
                    this.refund = String(response.data.data.amount)
                })
            },
            sub() {
                orderListRefund(this.id, this.refundMoney, this.remark).then(response => {
                    if (response.data.code === 0) {
                        this.$Message.success('申请成功')
                        this.$refs['refund'].resetFields()
                        this.Modal = false
                    } else {
                        this.$Message.error(response.data.message)
                    }
                })
            },
            handlePage(v) {
               orderListPage(v, this.searchForm).then(Response => {
                    this.data = Response.data.data.orders
                    this.page.total = Response.data.data.total
               })
            },
            // handleUserName(v) {
            //     stroeUser(v).then(Response => {
            //         this.storeUser = Response.data.data.staffs
            //     })
            // },
            hendleSearch() {
                orderListSearch(this.searchForm).then(Response => {
                    this.data = Response.data.data.orders
                    this.page.total = Response.data.data.total
                    this.page.pageSize = Response.data.data.size
                    this.page.current = Response.data.data.page
                    this.valid_count = Response.data.data.valid_count
                    this.valid_amount = Response.data.data.valid_amount
                })
            },
            startFormat(v) {
                this.searchForm.start = v
            },
            endFormat(v) {
                this.searchForm.end = v
            },
            nowDay() {
                const time = new Date().toLocaleDateString()
                this.searchForm.start = time.replace(/\//g,'-') + ' 00:00:00'
                this.startTime = time.replace(/\//g,'-') + ' 00:00:00'
                this.searchForm.end = time.replace(/\//g,'-') + ' 23:59:59'
                this.endTime = time.replace(/\//g,'-') + ' 23:59:59'
                this.hendleSearch()
            },
            toDay() {
                const time = new Date(new Date()-24*60*60*1000).toLocaleDateString()
                this.searchForm.start = time.replace(/\//g,'-') + ' 00:00:00'
                this.startTime = time.replace(/\//g,'-') + ' 00:00:00'
                this.searchForm.end = time.replace(/\//g,'-') + ' 23:59:59'
                this.endTime = time.replace(/\//g,'-') + ' 23:59:59'
                this.hendleSearch()
            },
            nowMonth() {
                const start = new Date(new Date().setDate(1)).toLocaleDateString()
                this.searchForm.start = start.replace(/\//g,'-') + ' 00:00:00'
                this.startTime = start.replace(/\//g,'-') + ' 00:00:00'
                const end = new Date().toLocaleDateString()
                this.searchForm.end = end.replace(/\//g,'-') + ' 00:00:00'
                this.endTime = end.replace(/\//g,'-') + ' 00:00:00'
                this.hendleSearch()
            },
            download() {
                orderListDown(this.searchForm).then(response => {
                    if (response.data.code === 0) {
                        this.exportExcel(response.data.data.data)
                    } else {
                        this.$Message.error(response.data.message)
                    }
                })
            },
            handleClose() {
                this.refundMoney = '';
            },
            exportExcel (list) {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('@/vendors/Export2Excel')
                    const tHeader = ['订单号', '门店名称', '交易金额', '实收金额', '退款金额', '付款状态', '支付方式', '支付时间', '手续费比例', '手续费'] // excel 表格头
                    const filterVal = ['order_number', 'store_name', 'amount', 'arrive_mount', 'refund_amount', 'pay_status', 'pay_software', 'pay_at', 'rate', 'commission_charge'] // excel key值
                    const data = this.formatJson(filterVal, list) // 自行洗数据 按序排序的一个array数组
                    export_json_to_excel(tHeader, data, '订单报表' + Date.now())
                })
            },
            formatJson(filterVal, jsonData) {

                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        },
        created() {
            this.init()
        }
    }
</script>